<template>
  <div class="page-view">
    <div class="poster-img-wp">
      <h3 class="title">
        长按图片分享
      </h3>
      <img
        v-if="posterUrl"
        :src="posterUrl"
        class="poster-pic"
      >
      <div
        v-else
        class="poster-pic"
      />
      <div
        class="share-btn"
        @click="callShare"
      >
        分享
      </div>
    </div>
    <div
      v-if="!hidePosterDiv"
      class="padding"
    />
    <div
      id="poster"
      ref="poster"
      class="poster-div"
      :style="{width: width + 'px', height: height + 'px'}"
    >
      <!-- <div class="inst-name">
        {{ instInfo.TrainingName }}
      </div> -->
      <!-- TODO:ww 换为机构三行logo -->
      <div class="logo-wp">
        <img
          :src="logoUrl"
          class="logo"
          crossorigin="anonymous"
        >
      </div>
      <div class="desc-wp">
        <div class="qrcode-wp">
          <img
            :src="qrcodeUrl"
            class="qrcode"
          >
          <!-- <canvas
            id="qrcode"
            ref="urlQrcode"
            class="qrcode"
          /> -->
        </div>
        <h3
          v-if="$route.query.uname"
          class="intro"
        >
          我是<span class="intro-name">
            {{ $route.query.uname }}
          </span>
        </h3>
        <div
          class="invite"
          :class="{'no-uname': !$route.query.uname}"
        >
          {{ invite }}
        </div>
        <div class="subject">
          {{ subject }}
        </div>
      </div>
      <div class="footer">
        <img
          src="~assets/share/book.png"
          class="book"
        >
        <div class="support">
          技术支持：会考吧平台
        </div>
      </div>
    </div>

    <div
      v-if="isWxQQ"
      class="tip"
      @click="isWxQQ = false"
    >
      <img
        src="~assets/share/share-tip.png"
        class="tip-pic"
      >
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
// import Qrious from 'qrious'
// import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
import domtoimage from 'dom-to-image-more'
import { imgToBase64 } from 'lib/utils'
import { loading } from '@/lib/appMethods'
import { setShareData, showShare } from 'lib/share/share'
import { mapState } from 'vuex'
import { isAndroid } from '@/lib/utils'
import { getShareInfo } from '@/lib/share/shareInfo'
export default Vue.extend({
  data () {
    const { url: path, name: fromName, subj, uname } = this.$route.query
    // const url = (location.origin || (location.protocol + '//' + location.host)) +
    // decodeURIComponent(path as string)
    // fromName as string, subj as string, uname as string
    const config = getShareInfo({
      routeName: fromName as string,
      subject: subj as string,
      userName: uname as string,
      sharePath: path as string,
    })
    return {
      posterUrl: '',
      logoUrl: '',
      qrcodeUrl: '',
      shareData: {
        ...config,
        imgUrl: this.$store.state.instInfo.SchoolH5Logo,
        from: 'jggw',
      },
      isWxQQ: false,
      subject: fromName === 'home' ? '论学习，我们是认真的' : config.desc,
      invite: fromName === 'home' ? '线上免费试听 真题考试自测' : '快来跟我一起开启学习之旅',
      width: window.screen.width * 2,
      // height: Math.max(window.screen.height, window.screen.width / 750 * 1334),
      height: window.screen.height * 2,
      hidePosterDiv: false,
    }
  },
  computed: {
    ...mapState(['instInfo']) as MappedState,
  },
  created () {
    loading.show('生成海报中...')
  },
  beforeRouteLeave (to, from, next) {
    loading.hide()
    next()
  },
  mounted () {
    Promise.all([this.imgToBase64(), this.generateQrcode()])
      .then(() => {
        setTimeout(() => {
          this.drawPoster()
        }, 50)
      })
  },
  methods: {
    generateQrcode () {
      return QRCode.toDataURL(this.shareData.link, {
        width: 255,
      }).then(url => {
        this.qrcodeUrl = url
      }).catch(err => {
        console.log(err)
      })
    },
    imgToBase64 () {
      return imgToBase64(this.instInfo.SchoolLogo!).then(res => {
        this.logoUrl = res
      })
    },
    drawPoster () {
      // if (isAndroid) {
      //   domtoimage.toJpeg(this.$refs.poster).then((dataUrl: string) => {
      //     this.setPosterUrl(dataUrl)
      //   }, (e: any) => {
      //     console.log('poster eerrr', e)
      //     this.setPosterUrl()
      //   })
      // } else {
      // domtoimage
      domtoimage.toSvg(this.$refs.poster).then((dataUrl: string) => {
        console.log(dataUrl.substr(0, 33))
        this.base64ToPic(dataUrl.substr(33).replace(/\s*%0A\s*/g, ''))
      })
      // }
    },
    base64ToPic (svg: string) {
      this.$axios({
        url: 'Setting/ConvertShareImg',
        data: {
          Content: svg,
        },
      }, 1).then(res => {
        this.setPosterUrl(res)
      }, () => {
        this.setPosterUrl()
      })
    },
    setPosterUrl (dataUrl?: string) {
      this.hidePosterDiv = true
      loading.hide()
      if (dataUrl) {
        this.posterUrl = dataUrl
      } else if (this.$route.name === 'poster') {
        this.$toast('海报加载失败请刷新重试！')
      }
    },
    callShare () {
      // 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。类似setShareData)
      const platform = showShare(this.shareData)
      if (platform === 'wx' || platform === 'qq') {
        this.isWxQQ = true
      } else if (platform === 'others') {
        this.$dialog.alert({
          message: '请使用您浏览器中自带的分享功能',
        })
      }
    },
  },
})
interface MappedState {
  instInfo: () => InstInfo
  [k: string]: any
}
</script>

<style lang="scss" scoped>
@import "~scss/others/poster.scss";
@function posterSize($px) {
  @return $px * 2;
}

.poster-div {
  // margin-top: 200px;
  position: relative;
  // position: absolute;
  // left: 100%;
  // width: 100%;
  // height: 100%;
  background: #f0f8f7 url('~assets/share/poster_bg.jpg') 50% 0/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: posterSize(350px) 0 posterSize(65px);
  // transform: scale(0.5);
  // transform-origin: 0 0;
  // padding-bottom: 35px;
}
.logo-wp {
  position: absolute;
  top: posterSize(50px);
  left: posterSize(150px);
  right: posterSize(150px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: posterSize(300px);
}
.logo {
  max-width: 100%;
  max-height: posterSize(304px);
  min-height: posterSize(100px);
}
.qrcode-wp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: posterSize(298px);
  height: posterSize(298px);
  margin: 0 auto posterSize(56px);
  background: #fff;
  box-shadow:0px 0px posterSize(30px) 0px rgba(0, 0, 0, 0.15);
}
.qrcode {
  // margin-top: -70px;
  width: posterSize(255px);
  // margin: 0 auto;
  box-shadow:0px 0px posterSize(16px) 0px rgba(0, 0, 0, 0.2);
}
.desc-wp {
  text-align: center;
  // margin-bottom: 180px;
}
.intro {
  font-size: posterSize(49px);
  color: #666;
  margin-bottom: posterSize(38px);
  // height: 46px;
}
.intro-name {
  color: $primary-web;
}
.invite {
  font-size: posterSize(50px);
  color: #333;
  margin-bottom: posterSize(81px);
  font-weight: 600;
  white-space: nowrap;
  &.no-uname {
    margin-top: posterSize(102px);
  }
}
.subject {
  font-size: posterSize(43px);
  color: #666;
  line-height: 1.5;
  max-width: 85%;
  margin: 0 auto;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: posterSize(29px);
}
.book {
  display: block;
  width: posterSize(168px);
  margin-bottom: posterSize(27px);
}
</style>
